<template>
  <div class="geDanWeiHuoDongShuLiang">
    <div class="top-tools">
        <h3>各单位活动数量分布</h3>
        <div class="select-school">
            <span :class="{active:dataIndex==0}" @click="changeIndex(0)">本学期</span> |
            <span :class="{active:dataIndex==1}" @click="changeIndex(1)">上学期</span>
        </div>
    </div>
    <div id="geDanWeiHuoDongShuLiang"></div>
  </div>
</template>

<script>
import { Chart } from '@antv/g2';
export default {
  name: 'geDanWeiHuoDongShuLiang',
  props: {
    msg: String
  },
  data(){
	  return{
          dataIndex:0,
		  data:[
              [
                
                // { "type": "生命科学技术学院", "value": 1 },
                // { "type": "人工智能学院", "value": 1 },
                // { "type": "经济与管理学院", "value": 1 },
                // { "type": "海棠九号书院", "value": 1 },
                // { "type": "数学与统计学院", "value": 2 },
                // { "type": "人文学院", "value": 2 },
                // { "type": "外国语学院", "value": 2 },
                { "type": "计算机科学与技术学院", "value": 2 },
                { "type": "机电工程学院", "value": 3 },
                { "type": "电子工程学院", "value": 4 },
                { "type": "空间科学与技术学院", "value": 4 },
                { "type": "海棠七号书院", "value": 4 },
                { "type": "先进材料与纳米科技学院", "value": 6 },
                { "type": "通信工程学院", "value": 8 },
                { "type": "本科生院（书院）", "value": 8 },
                { "type": "海棠八号书院", "value": 8 },
                { "type": "物理与光电工程学院", "value": 20 }
              ],
			  [
                { "type": "人工智能学院", "value": 1 },
                { "type": "人文学院", "value": 2 },
                { "type": "海棠九号书院", "value": 3 },
                { "type": "经济与管理学院", "value": 3 },
                { "type": "机电工程学院", "value": 4 },
                { "type": "物理与光电工程学院", "value": 6 },
                { "type": "本科生院（书院）", "value": 8 },
                { "type": "计算机科学与技术学院", "value": 10 },
                { "type": "空间科学与技术学院", "value": 31 },
              ],
          ],
          chart:null,
	  }
  },
  methods:{
      changeIndex(idx){
          this.dataIndex = idx;
          this.chart.changeData(this.data[idx])
      },
	  createChart(){
		  const chart = new Chart({
		    container: 'geDanWeiHuoDongShuLiang',
		    autoFit: true,
		    height: 790,
		  });
		  chart.data(this.data[0]);
		  chart.scale({
		    value: {
		      max: 30,
		      min: 0,
		      alias: '数量（个）',
		    },
		  });
		  chart.axis('type', {
		    label:{
                style:{
                    fill:'#fff',
                    fontSize:14
                }
            }
		  });
      chart.axis('value',{
          label:{
              style:{
                  fill:'#fff',
              }
          }
      })
		  chart.axis('value', {
		    label: null,
		    title: {
		      offset: 30,
		      style: {
		        fontSize: 12,
		        fontWeight: 300,
		      },
		    },
		  });
		  chart.legend(false);
		  chart.coordinate().transpose();
		  chart
		    .interval()
		    .position('type*value')
            .size(16)
            .color('#00FFEE')
		    .label('value', {
		      style: {
		        fill: '#8d8d8d',
		      },
		      offset: 10,
		    });
		  chart.interaction('element-active');
          chart.render();
          this.chart = chart;
	  }
  },
  mounted(){
    this.createChart();
    //键盘上下键控制页面切换
    document.addEventListener('keydown',(e)=>{
      if(e.keyCode==37){
        this.changeIndex(0)
      }else if(e.keyCode==39){
        this.changeIndex(1)
      }
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.geDanWeiHuoDongShuLiang{
    padding:20px;
    .top-tools{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        h3{
            font-size: 16px;
            height: 16px;
            line-height: 16px;
            padding-left: 10px;
            border-left: 4px solid #00FFEE;
        }
        .select-school{
            span{
                cursor: pointer;
            }
            .active{
                color: #00FFEE;
            }
        }
    }
}
</style>
